﻿
.tab-item-1{
    animation-duration: .5s;
    -webkit-animation-name: do-tab-anim;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: ease-in;
}

.tab-item-1, .tab-item-2{
    animation-name: do-tab-anim;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
}

.tab-item-2{
    animation-duration: .6s;
    animation-delay: .15s;
    -webkit-animation-name: do-tab-anim2;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: .6s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-delay: .15s;
}

@keyframes do-tab-anim {
    0%,100% {
        transform: translate(0,0);
        opacity: 1;
    }

    40% {
        transform: translate(-10px,0);
        opacity: 0;
    }

    60% {
        transform: translate(10px,0);
        opacity: 0;
    }
}

@-webkit-keyframes do-tab-anim {
    0%,100% {
        -webkit-transform: translate(0,0);
        opacity: 1;
    }

    40% {
        -webkit-transform: translate(-10px,0);
        opacity: 0;
    }

    60% {
        -webkit-transform: translate(10px,0);
        opacity: 0;
    }
}
@keyframes do-tab-anim2 {
    0%,100% {
        transform: translate(0,0);
        opacity: 1;
    }

    40% {
        transform: translate(10px,0);
        opacity: 0;
    }

    60% {
        transform: translate(-10px,0);
        opacity: 0;
    }
}

@-webkit-keyframes do-tab-anim2 {
    0%,100% {
        -webkit-transform: translate(0,0);
        opacity: 1;
    }

    40% {
        -webkit-transform: translate(10px,0);
        opacity: 0;
    }

    60% {
        -webkit-transform: translate(-10px,0);
        opacity: 0;
    }
}
#chatBox{width:600px;height:auto;display:block;background:#fff;}
#chatBoxRightButton{width:50px;height:40px;display:block;background:#f04848;position:absolute;top:0;left:-50px;line-height:40px;text-align:center;color:#fff;font-size:25px;cursor:pointer}
#chatBox .left{width:440px;height:510px;padding:5px;display:block;overflow:auto}
#chatBox .right{width:140px;height:510px;padding:5px;display:block;overflow:auto;background:#F1EDED}
#SendBox{width:580px;height:auto;padding:20px 10px;clear:both}
#SendBox a,#SendBox input[type=text]{float:left}
#SendBox input[type=text]{width:478px;height:30px;line-height:30px;border-top-left-radius:5px;border-bottom-left-radius:5px;padding:0 10px;border:1px solid #eee}
#SendBox .sendBtn{width:78px;height:30px;line-height:30px;display:block;text-align:center;background:#f04848;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px;border:1px solid #f04848;font-size:16px}
#SendBox input[type=text]:active,#SendBox input[type=text]:focus{-webkit-box-shadow:0 0 16px rgba(0,0,0,.1);box-shadow:0 0 16px rgba(0,0,0,.1)}
#chatContent{width:440px}
#chatContent dl{margin-bottom:30px}
#chatContent dd,#chatContent dt{float:left}
#chatContent dt,#chatContent dt img{width:40px;height:40px;display:block;border-radius:50%;background:#eee;cursor:pointer;}
#chatContent dd{max-width:310px;height:auto;padding:5px;display:block;background:#f04848;border-radius:5px;position:relative;margin:20px 0 0 20px;line-height:20px;color:#fff;word-wrap:break-word;word-break:normal}
#chatContent dd.per{background:#1bbc9b}
#chatContent dd .J_Users{position:absolute;top:-20px;left:0;height:20px;line-height:20px;display:block;overflow:hidden;width:310px;color:#999;font-size:10px;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;cursor:pointer}
#chatContent dd .J_Users span {background: #1bbc9b;font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;color: #fff;padding: 2px 10px;border-radius: 4px;margin-left: 5px;}
#chatContent dd i{width:15px;height:15px;display:block;position:absolute;top:5px;left:-15px;background:url(/libs/images/dialog_w.png) no-repeat}
#chatContent dd s{width:15px;height:15px;display:block;position:absolute;top:5px;left:-15px;background:url(/libs/images/dialog_s.png) no-repeat}
#chatContent dl.messageTip dt{display:none;}
#chatContent dl.messageTip dd{background:#fff;color:#999;margin-left:10px;}
#OnlineUsers dl{cursor:pointer;margin-bottom:10px;}
#OnlineUsers dl:hover{color:#F04848}
#OnlineUsers dd,#OnlineUsers dt{float:left}
#OnlineUsers dt{width:30px;height:30px}
#OnlineUsers dt img{width:30px;height:30px;display:block;border-radius:50%;background:#eee}
#OnlineUsers dd{width:95px;height:30px;overflow:hidden;line-height:30px;margin-left:5px;white-space:nowrap}
#OnlineUsers .liveout dt img{opacity:0.5;}
#OnlineUsers .liveout dd{color:#ccc}
#SendUserInfo{height:25px;width:560px;padding:0 10px}
#SendUserInfo span{background:#f04848;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;color:#fff;padding:2px 5px;border-radius:4px}
#SendUserInfo i{margin-left:5px;color:#f04848;cursor:pointer}
